<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>API文档 - 食物食材食品基本信息Web系统</title>
  <link rel="stylesheet" href="css/style.css">
  <script>
    if (!sessionStorage.getItem('isLoggedIn') || sessionStorage.getItem('userRole') !== 'admin') {
      window.location.href = 'index.html';
    }
  </script>
  <style>
    .api-section { background: #fff; border-radius: 8px; padding: 20px; margin: 20px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .api-method { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; color: #fff; margin-right: 10px; }
    .method-get { background: #61affe; } .method-post { background: #49cc90; } .method-put { background: #fca130; } .method-delete { background: #f93e3e; }
    .api-url { font-family: monospace; background: #f5f5f5; padding: 8px 12px; border-radius: 4px; margin: 10px 0; word-break: break-all; }
    .code-block { background: #f8f8f8; border: 1px solid #e1e1e1; border-radius: 4px; padding: 15px; margin: 10px 0; font-family: monospace; white-space: pre-wrap; overflow-x: auto; }
    .nav-tabs { display: flex; border-bottom: 2px solid #ddd; margin-bottom: 20px; }
    .nav-tab { padding: 10px 20px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
    .nav-tab.active { border-bottom-color: #388e3c; color: #388e3c; font-weight: bold; }
    .tab-content { display: none; } .tab-content.active { display: block; }
    .api-welcome {
      font-size: 22px;
      font-weight: bold;
      color: #2e7d32;
      margin-bottom: 18px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="bg"></div>
  <div class="bg bg2"></div>
  <div class="bg bg3"></div>
  <header>
    <h1>食物食材食品基本信息Web系统</h1>
    <nav>
      <div class="user-menu" id="userMenu">
        <img src="img/avatar.png" alt="头像" class="avatar" id="userAvatar">
        <span class="username" id="usernameDisplay">用户</span>
        <span class="dropdown-arrow">&#9662;</span>
        <div class="dropdown-menu" id="dropdownMenu">
          <a href="#" id="profileLink"><span class="menu-icon">&#8962;</span> 个人空间</a>
          <a href="login.html" id="logout"><span class="menu-icon">&#9906;</span> 退出登录</a>
        </div>
      </div>
    </nav>
  </header>
  <main>
    <a href="index.html" class="back-home-btn"><span>返回首页</span></a>
    <section>
      <h2>API文档</h2>
      <p class="api-welcome">本系统提供完整的RESTful API接口，支持食物、食材、食品信息的管理。</p>
      
      <div class="nav-tabs">
        <div class="nav-tab active" onclick="showTab('auth')">认证接口</div>
        <div class="nav-tab" onclick="showTab('data')">数据管理</div>
        <div class="nav-tab" onclick="showTab('user')">用户管理</div>
        <div class="nav-tab" onclick="showTab('system')">系统管理</div>
      </div>
      
      <div id="auth" class="tab-content active">
        <div class="api-section">
          <h3><span class="api-method method-post">POST</span>用户注册</h3>
          <div class="api-url">/api/register</div>
          <p>注册新用户，支持普通用户和管理员注册</p>
        </div>
        
        <div class="api-section">
          <h3><span class="api-method method-post">POST</span>用户登录</h3>
          <div class="api-url">/api/login</div>
          <p>用户登录，返回JWT token</p>
        </div>
      </div>
      
      <div id="data" class="tab-content">
        <div class="api-section">
          <h3><span class="api-method method-get">GET</span>查询食物</h3>
          <div class="api-url">/api/foods</div>
          <p>支持按名称、日期范围、创建者查询</p>
        </div>
        
        <div class="api-section">
          <h3><span class="api-method method-post">POST</span>添加食物</h3>
          <div class="api-url">/api/foods</div>
          <p>添加新食物信息，支持图片上传</p>
        </div>
        
        <div class="api-section">
          <h3><span class="api-method method-get">GET</span>查询食材</h3>
          <div class="api-url">/api/ingredients</div>
          <p>查询食材信息</p>
        </div>
        
        <div class="api-section">
          <h3><span class="api-method method-post">POST</span>添加食材</h3>
          <div class="api-url">/api/ingredients</div>
          <p>添加新食材信息，支持图片上传</p>
        </div>
        
        <div class="api-section">
          <h3><span class="api-method method-get">GET</span>查询食品</h3>
          <div class="api-url">/api/products</div>
          <p>查询食品信息</p>
        </div>
        
        <div class="api-section">
          <h3><span class="api-method method-post">POST</span>添加食品</h3>
          <div class="api-url">/api/products</div>
          <p>添加新食品信息，支持图片上传</p>
        </div>
      </div>
      
      <div id="user" class="tab-content">
        <div class="api-section">
          <h3><span class="api-method method-get">GET</span>获取用户列表</h3>
          <div class="api-url">/api/users</div>
          <p>需要管理员权限</p>
        </div>
        
        <div class="api-section">
          <h3><span class="api-method method-post">POST</span>更新用户权限</h3>
          <div class="api-url">/api/users/role</div>
          <p>更新用户角色，需要管理员权限</p>
        </div>
        
        <div class="api-section">
          <h3><span class="api-method method-delete">DELETE</span>删除用户</h3>
          <div class="api-url">/api/users/:username</div>
          <p>删除用户，不能删除管理员账号</p>
        </div>
      </div>
      
      <div id="system" class="tab-content">
        <div class="api-section">
          <h3><span class="api-method method-get">GET</span>获取操作日志</h3>
          <div class="api-url">/api/operation-logs</div>
          <p>获取最近20条操作日志</p>
        </div>
        
        <div class="api-section">
          <h3><span class="api-method method-get">GET</span>备份数据</h3>
          <div class="api-url">/api/backup/:table</div>
          <p>导出指定表为Excel文件</p>
        </div>
        
        <div class="api-section">
          <h3><span class="api-method method-post">POST</span>提交建议</h3>
          <div class="api-url">/api/suggestions</div>
          <p>提交系统改进建议</p>
        </div>
      </div>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 食物食材食品基本信息Web系统</p>
  </footer>
  <script src="js/user_menu.js"></script>
  <script>
    function showTab(tabName) {
      document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
      document.querySelectorAll('.nav-tab').forEach(tab => tab.classList.remove('active'));
      document.getElementById(tabName).classList.add('active');
      event.target.classList.add('active');
    }
  </script>
</body>
</html> 